<template>
  <div class="school-info-box flex-col-start">
    <div class="school-info-item flex-row-start">

      <div class="school-info-item-row flex-col-center" style="width: 40%;">
        <el-avatar :size="100" :src="school.school.schoolBadgeUrl"></el-avatar>
        <div style="margin-top: 20px;font-weight: 550">{{ school.school.schoolName }}</div>
      </div>

      <div v-for="(item,index) in school.campusList" class="school-info-item-row flex-col">
        <MiLabel style="width:fit-content">{{ item.campus.name }}</MiLabel>
        <div>动物数量: {{ 100 }}</div>
      </div>

    </div>

  </div>
</template>

<script>
import AnimalRankingList from "@/components/animal/AnimalRankingList.vue";
import MiLabel from "@/components/label/MiLabel.vue";

export default {
  name: "SchoolInfoBox",
  components: {MiLabel, AnimalRankingList},
  props: {
    school: {
      type: Object,
      school: {
        schoolBadgeUrl: require("@/assets/img/defaultSchoolAvatar.webp")
      }
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="less">
  .school-info-box{
    width: 100%;
    .school-info-item{
      padding-top: 20px;
      padding-bottom: 50px;
      width: 100%;
      border-radius: 5px;
      //box-shadow: 0 2px 12px 0 rgba(0,0,0,0.2);
      .school-info-item-row{
        width: 95%;

        .mi-label-box {
          width: 30%;
          margin: 10px 0;
        }
      }
    }
  }
</style>